<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>timepiece</title>
    <style>
        .basic-poition {             /*由于不能继承，这样封装感觉也会很麻烦，不如按类封装*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,0);
        }
        .box {
            width: 300px;
            height: 300px;
            border: 7px solid #ccc;
            margin: 150px auto;
            border-radius: 50%;
            position: relative;
        }
        .line {
            width: 7px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%,0);
        }
        .line1 {
            transform:translate(-50%,0) rotate(30deg) ;
        }
        .line2 {
            transform:translate(-50%,0) rotate(60deg) ;
        }
        .line3 {
            transform:translate(-50%,0) rotate(150deg) ;
        }
        .line4 {
            transform:translate(-50%,0) rotate(120deg) ;
        }
        .num {
            width: 30px;
            height: 30px;
            background-color: #46BEEE;
            font-size: 20px;
            font-weight: bold;
            line-height: 30px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,0);
            z-index: 3;
        }
        .n12 {
            top: 0;
            color: red;
        }
        .n3 {
            left: 90%;
            color: green;
            transform:translate(0,-50%);
        }
        .n6 {
            top:90%;
            color: blue;
        }
        .n9 {
            left: 0;
            color:yellow ;
            transform:translate(0,-50%);
        }
        .cover {
            width: 275px;
            height: 275px;
            background-color: #fff;
            top: 12px;
            left: 12px;
            border-radius: 50%;
            transform: translate(0,0);
        }
        .finger {
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-100%);
            z-index: 2;
            transform-origin:center bottom ;
        }
        .hour {
            width: 10px;
            height: 60px;
            background-color: red;
            -webkit-animation: clock 43200s infinite steps(60);
            -o-animation: clock 43200s infinite steps(60);
            animation: clock 43200s infinite steps(60);
        }
        .minute {
            width: 7px;
            height: 90px;
            background-color: green;
            -webkit-animation: clock 3600s infinite steps(60);
            -o-animation: clock 3600s infinite steps(60);
            animation: clock 3600s infinite steps(60);
        }
        .second {
            width: 3px;
            height: 119px;
            background-color: blue;
            -webkit-animation: clock 60s infinite steps(60);
            -o-animation: clock 60s infinite steps(60);
            animation: clock 60s infinite steps(60);
        }
        .center {
            width: 15px;
            height: 15px;
            background-color: #ccc;
            border-radius: 50%;
            top: 51%;
            transform:translate(-50%,-100%);
        }
        @keyframes clock {
            0% {
                transform:translate(-50%,-100%) rotate(0deg);
            }
            100% {
                transform:translate(-50%,-100%) rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="dv">
    <div class="box ">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="num n12">12</div>
        <div class="num n6">6</div>
        <div class="num n3">3</div>
        <div class="num n9">9</div>
        <div class="finger hour"></div>
        <div class="finger minute"></div>
        <div class="finger second"></div>
        <div class="finger center"></div>
        <div class="basic-poition cover"></div>
    </div>
</div>
</body>
</html>